<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>族谱</title>
<meta name="keywords" content="css,css3" />
<link rel="stylesheet" type="text/css" href="assets/css/main.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<div id="main">
    <div class="tree">
	<ul>
		<li>
			<a href="#" contenteditable="true" class="thistop">填写名称</a>
		</li>
	</ul>
</div>
</div>
<div class="wrap-ms-right" style="">
	<li class="ms-item addqizi" data-item="0"><i class="fa fa-plus"></i>&nbsp; 添加妻子</li>
	<li class="ms-item addup" style='display: none' data-item="1"><i class="fa fa-plus"></i>&nbsp; 向上添加</li>
	<li class="ms-item adddown" data-item="1"><i class="fa fa-plus"></i>&nbsp; 向下添加</li>
	<li class="ms-item" data-item="2"><i class="fa fa-files-o"></i>&nbsp; 修改名称</li>
	<li class="ms-item remove" data-item="3"><i class="fa fa-trash"></i>&nbsp; 删除当前</li>
</div>
<script type="text/javascript">
$(function(){
	$("body").on('li a').unbind("mousedown").bind("contextmenu", function (e) {
	    e.preventDefault();
	    return false;
	});
	$("body").on("mousedown",'li a', function (event) {
		var html = $('.tree').html();
		$('.data-this').removeClass('data-this');
		$(this).addClass('data-this');
	    if (event.which == 3) {
	        $('.wrap-ms-right').css({
				"display": "block",
				"top": event.pageY + "px",
				"left": event.pageX + "px"
			});
			if($('.data-this').hasClass('thistop')){
				$('.addup').show();
			}else{
				$('.addup').hide();
			}
			$('.addqizi').click(function(){
				$('.data-this').append('&nbsp; &nbsp; <a href="#" contenteditable="true">填写名称</a>');
				$('.data-this').removeClass('data-this');
			})
			$('.adddown').click(function(){
				if($(".data-this").siblings('ul').length > 0){
					$('.data-this').siblings('ul').append('<li><a href="#" contenteditable="true">填写名称</a></li>');
				}else{
					$('.data-this').after('<ul><li><a href="#" contenteditable="true">填写名称</a></li></ul>');
				}
				$('.data-this').removeClass('data-this');
			})
			$('.addup').click(function(){
				$('.thistop').removeClass('thistop');
				var thml2 = '<ul><li><a href="#" contenteditable="true" class="thistop">填写名称</a>'+html+'</li></ul>';
				$('.tree').empty();
				$('.tree').append(thml2);
				$('.data-this').removeClass('data-this');
			})
			$('.remove').click(function(){
				if($('.data-this').parents('li').length == 0){
					$('.data-this').parents('li').parent('ul').remove();
				}else{
					$('.data-this').parent().remove();
				}
				$('.data-this').removeClass('data-this');
			})
	    }
	});
	$(document).click(function(){
		$('.wrap-ms-right').css({"display": "none"});
		$('.data-this').removeClass('data-this');
	})
})

</script>
</body>
</html>
